import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Tabs, Button, Card, Row, Col,Tooltip, Icon } from 'antd';
import { bindActionCreators } from 'redux';
import moment from 'moment';
import { connect } from 'react-redux';
import styles from './OrderDetail.less';
import { CommonTable } from 'components';
import { orderDetailAction } from './index';
import AddUrgeModal from './AddUrgeModal/AddUrgeModal';
import UrgeRecordModal from './UrgeRecordModal/UrgeRecordModal';
import { axios } from 'utils';
const TabPane = Tabs.TabPane;

//催收记录
const urgeRecordColumns = [
    {
        title: '添加时间',
        dataIndex: 'createTime',
        key: 'createTime',
        render(text) {
            return moment(Number(text)).format('YYYY-MM-DD HH:mm:ss');
        }
    },
    { title: '备注', dataIndex: 'remark', key: 'remark' },
    { title: '联系人', dataIndex: 'collectorname', key: 'collectorname' }
];

class OrderDetail extends Component{
    constructor(props) {
        super(props);
        const { location: { pathname } } = this.props;
        //判断是否显示添加催收记录按钮
        const isShowBtn = pathname.indexOf('endRecordList') === -1;

        this.state = {
            remark: '',
            isShowBtn,
            info: {
                orderNo: '',
                userTrueName: '',
                isOlduser: '',
                userPhone: '',
                deviceMoney: '',
                applyTime: '',
                loanTime: '',
                lendMoney: '',
                payable: '',
                overMoney: '',
                payMoney: '',
                leftMoney: '',
                reduceMoney: '',
                reduceMoney: '',
                user: {
                    nameTrue: '',
                    phoneNo: '',
                    idcardNo: '',
                    address: '',
                    tdreportDes: '',
                    tdreportPoint: '',
                },
                userRealnameInfo: {
                    idcardFrontPhoto: '',
                    idcardBackPhoto: '',
                    livingPhoto: '',
                },
                reduceList: [],
            }
        };
        const _this = this;
        this.overdueRecordColumns = [
            { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
            {
                title: '逾期时间',
                dataIndex: 'expireTime',
                key: 'expireTime',
                render(text) {
                    return moment(Number(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            { title: '催收人', dataIndex: 'collectorName', key: 'collectorName' },
            {
                title: '操作',
                dataIndex: 'id',
                key: 'id',
                render(text) {
                    return (
                        <Tooltip title={'查看电话记录'}>
                            <div style={{ textAlign: 'center', cursor: 'pointer' }}  onClick={() => _this.lookRecord(text)}>
                                <Icon type={'edit'}/>
                            </div>
                        </Tooltip>

                    );
                }
            }
        ];
    }

    //查看催收记录
    lookRecord = (text) => {
        const { lookUrgeRecord } = this.props;
        lookUrgeRecord({ overdueId: text });
    }

    urgeHandleCancel = () => {
        const { changeRecordVisible } = this.props;
        changeRecordVisible(false);

    }

    renderBtn = () => {
        const { isShowBtn } = this.state;
        const ele = isShowBtn ? <Button type={'primary'} onClick={this.handleBtnClick}>添加电话记录</Button> : null;
        return (
            <div className={styles.btnWrapper}>
                {ele}
                <Button onClick={this.backList}>返回</Button>
            </div>
        );
    }
    //添加电话记录
    handleBtnClick = () => {
        const { changeVisible } = this.props;
        changeVisible(true);
    }
    //返回列表页
    backList = () => {
        const { history: { push }, location: { pathname } } = this.props;
        const pathArr = pathname.split('/');
        const realPath = '/' + pathArr[1];
        push(realPath);
    }
    //渲染订单信息
    renderOrderCard = () => {
        const { info } = this.state;
        const isOlduserStyle = info.isOlduser === '是' ? { color: 'red' } : {};
        return (
            <div>
                <Card type={'inner'} title={'业务信息'}>
                    <Row gutter={24}>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>订单号：</span><span>{info.orderNo}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>姓名：</span><span>{info.userTrueName}</span></Col>
                        <Col style={isOlduserStyle} className={styles.col} lg={12} xl={8}><span className={styles.title}>是否是老用户：</span><span>{info.isOlduser}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>手机号：</span><span>{info.userPhone}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>借款金额(元)：</span><span>{info.lendMoney}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>申请时间：</span><span>{info.applyTime}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>放款时间：</span><span>{info.loanTime}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>申请金额(元)：</span><span>{info.lendMoney}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>应还金额(元)：</span><span>{info.payable}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>滞纳金(元)：</span><span>{info.overMoney}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>已还金额(元)：</span><span>{info.payMoney}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>剩余应还(元)：</span><span>{info.leftMoney}</span></Col>
                        {/* <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>减免金额(元)：</span><span>{reduceMoney}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>减免时间：</span><span>{reduceTime}</span></Col> */}
                    </Row>
                </Card>
                <CommonTable columns={urgeRecordColumns} dataSource={this.state.urgeRecord || []} title={() => <div>电话记录</div>}/>

            </div>
        );


    }
    //渲染客户信息
    renderUserInfo = () => {
        const { info: { user, userRealnameInfo} } = this.state;
        return (
            <div>
                <Card type={'inner'} title={'个人信息'}>
                    <Row gutter={16}>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>姓名：</span><span>{user.nameTrue || ''}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>手机号：</span><span>{user.phoneNo || ''}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>身份证号：</span><span>{user.idcardNo || ''}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>家庭住址：</span><span>{user.address || ''}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>风险等级：</span><span>{user.tdreportDes || ''}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>同盾分数：</span><span>{user.tdreportPoint}</span></Col>
                    </Row>
                </Card>
                <div className={styles.card}>
                    <Card type={'inner'} title={'客户资料'}>
                        <Row gutter={96}>
                            <Col className={`${styles.col}`} lg={12} xl={8}>
                                {
                                    userRealnameInfo['idcardFrontPhoto'] && <img className={styles.imgCol} width={'100%'} src={userRealnameInfo['idcardFrontPhoto']}/>
                                }
                            </Col>
                            <Col className={`${styles.col}`} lg={12} xl={8}>
                                {
                                    userRealnameInfo['idcardBackPhoto'] && <img className={styles.imgCol} width={'100%'} src={userRealnameInfo['idcardBackPhoto']}/>
                                }

                            </Col>
                            <Col className={`${styles.col}`} lg={12} xl={8}>
                                {
                                    userRealnameInfo['livingPhoto'] && <img className={styles.imgCol} width={'100%'} src={userRealnameInfo['livingPhoto']}/>
                                }
                            </Col>
                        </Row>

                    </Card>
                </div>


            </div>
        );
    }

    //关闭添加电话记录弹窗
    urgeModalCancel = () => {
        const { changeVisible } = this.props;
        changeVisible(false);
        this.setState({ remark: '' });
    }
    //添加电话记录
    urgeHandleOk = (obj) => {
        const { match, addUrgeRecord } = this.props;
        const params = match['params']['id'] || '';
        addUrgeRecord({ ...obj, overdueId: params }, () => {
            this.getAllUrgeRecord({ overdueId: params });
        });

    }

    getAllUrgeRecord = (data) => {
        axios({
            url: '/hs/admin/endRecordCollection/list',
            method: 'post',
            data
        }).then((res) => {
            if(res.data) {
                const data = res.data
                this.setState({
                    urgeRecord: data
                })
            }
        })
    }

    getOrderData = (data) => {
        axios({
            url: '/hs/admin/orderEnd/detail',
            method: 'post',
            data
        }).then((res) => {
            if(res.data) {
                const data = res.data
                if (data.user && data.user.isOlduser) {
                    data.user.isOlduser = Number(data.user.isOlduser) === 0 ? '否' : '是'
                }
                if (data.applyTime) {
                    data.applyTime = moment(Number(data.applyTime) * 1000).format('YYYY-MM-DD HH:mm:ss') || ''
                }
                if (data.loanTime) {
                    data.loanTime = moment(Number(data.loanTime) * 1000).format('YYYY-MM-DD HH:mm:ss') || ''
                }
                this.setState({
                    info: data
                })
            }
        })
    }

    componentDidMount() {
        const { match, location: { state } } = this.props;
        const userId = state ? state['userId'] : '';
        const params = match['params']['id'] || '';
        this.getOrderData({ overdueId: params }, { userId });
        // this.handleAxios({overdueId:params})
        this.getAllUrgeRecord({ overdueId: params });
    }
    componentWillUnmount() {
        const { setOrderData } = this.props;
        setOrderData({});
    }

    render() {
        const ele = this.renderBtn();
        const { visible, recordVisible, recordData } = this.props;
        const { remark } = this.state;
        return (
            <div>
                <Tabs animated={false} tabBarExtraContent={ele}>
                    <TabPane tab="订单信息" key="1">
                        {this.renderOrderCard()}
                    </TabPane>
                    <TabPane tab="客户信息" key="2">
                        {this.renderUserInfo()}
                    </TabPane>
                </Tabs>
                <AddUrgeModal visible={visible} handleCancel={this.urgeModalCancel} handleOk={this.urgeHandleOk} remark={remark}/>
                <UrgeRecordModal visible={recordVisible} handleCancel={this.urgeHandleCancel} tableData={recordData}/>
            </div>
        );
    }
}

OrderDetail.propTypes = {
    orderData: PropTypes.object,
};
OrderDetail.defaultProps = {
    orderData: {
        orderInfo: {
            orderNo: 1,
            name: 'zs',
            phoneNo: '12345678998',
            loanMoney: '30',
            applyTime: '2018-5-7',
            iCloudAccount: '12345',
            iCloudPassword: '123',
            loanTime: '2018-6-07',
            accountMoney: '30',
            standOverNumber: '2',
            overdueTime: '2018-5-7',
            backMoney: '30',
            lateFees: '10',
            hasBackMoney: '20',
            surplusBackMoney: '10',
            standOverMoney: '10',
            backRecord: [],
            urgeRecord: [],
            standOverRecord: [],
            overdueRecord: [],
            deviceModel: '',
            isOlduser: '1',
            deviceMemory: ''
        },
        userInfo: {
            name: 'zs',
            phoneNo: '1234567892',
            idCard: '123456788945563235',
            address: '浙江省杭州市xxx',
            idCardFrontPhoto: '',
            idCardBackPhoto: '',
            idCardPhoto: ''
        },
        addressBook: [],
        operator: {
            photoRecord: []
        }
    }
};
const mapStateToProps = (state) => {
    const { oderEndManageState: { orderDetailState } } = state;
    return {
        orderData: orderDetailState['orderData'],
        visible: orderDetailState['visible'],
        recordVisible: orderDetailState['recordVisible'],
        recordData: orderDetailState['recordData']
    };
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        changeVisible: orderDetailAction.ordcChangeModalVisible,
        getOrderData: orderDetailAction.ordcGetOrderDetail,
        setOrderData: orderDetailAction.ordcSetOrderDetail,
        changeRecordVisible: orderDetailAction.ordcChangeRrecordModal,
        lookUrgeRecord: orderDetailAction.ordcLookUrgeRecord,
        addUrgeRecord: orderDetailAction.ordcAddUrgeRecord,
        getAllUrgeRecord: orderDetailAction.ordcGetUrgeRecord
    }, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(OrderDetail);